import React, { FC } from "react"
import { Space, Button, Tooltip } from "antd"
import {
    BlockOutlined,
    CopyOutlined,
    DeleteOutlined,
    DownOutlined,
    EyeInvisibleOutlined,
    LockOutlined,
    RedoOutlined,
    UndoOutlined,
    UpOutlined
} from "@ant-design/icons"
import {
    changeComponentHidden,
    copySelectedComponent,
    moveComponent,
    pasteCopiedComponent,
    removeSelectedComponent,
    toggleComponentLocked
} from "../../../../store/componentsReducer"
import { useDispatch } from "react-redux"
import useGetComponentInfo from "../../../../hooks/useGetComponentInfo"
// 模块导入中重命名：必须使用 as
import { ActionCreators as UndoActionCreators } from "redux-undo"

const EditToolbar: FC = () => {
    const dispatch = useDispatch()
    const { selectedId, componentList = [], selectedComponent, copiedComponent } = useGetComponentInfo()

    const { isLocked } = selectedComponent || {}
    const length = componentList.length
    const selectedIndex = componentList.findIndex(c => c.fe_id === selectedId)
    // 判断选中的组件是否是第一个
    const isFirst = selectedIndex <= 0

    // 判断选中的组件是否是最后第一个
    const isLast = selectedIndex + 1 >= length

    // 删除组件
    function handleDelete() {
        // 移除选中的组件
        dispatch(removeSelectedComponent())
    }

    // 隐藏组件
    function handleHidden() {
        // 隐藏选中的组件
        dispatch(changeComponentHidden({ fe_id: selectedId, isHidden: true }))
    }

    // 锁定组件
    function handleLock() {
        dispatch(toggleComponentLocked({ fe_id: selectedId }))
    }

    // 复制
    function copy() {
        dispatch(copySelectedComponent())
    }

    // 粘贴
    function paste() {
        dispatch(pasteCopiedComponent())
    }

    // 上移
    function moveUp() {
        // 如果已经是第一个  就不操作
        if (isFirst) return
        // 上移 就是索引减1
        dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex - 1 }))
    }

    // 下移
    function moveDown() {
        // 上移 就是索引减1
        dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex + 1 }))
    }

    // 撤销
    function undo() {
        dispatch(UndoActionCreators.undo())
    }

    // 重做
    function redo() {
        dispatch(UndoActionCreators.redo())
    }

    return (
        <Space>
            <Tooltip title="删除">
                <Button shape="circle" icon={<DeleteOutlined />} onClick={handleDelete} />
            </Tooltip>
            <Tooltip title="隐藏">
                <Button shape="circle" icon={<EyeInvisibleOutlined />} onClick={handleHidden} />
            </Tooltip>
            <Tooltip title="锁定">
                <Button shape="circle" icon={<LockOutlined />} type={isLocked ? "primary" : "default"} onClick={handleLock} />
            </Tooltip>
            <Tooltip title="复制">
                <Button shape="circle" icon={<CopyOutlined />} onClick={copy} />
            </Tooltip>
            <Tooltip title="粘贴">
                <Button shape="circle" icon={<BlockOutlined />} onClick={paste} disabled={copiedComponent == null} />
            </Tooltip>
            <Tooltip title="上移">
                <Button shape="circle" icon={<UpOutlined />} onClick={moveUp} disabled={isFirst} />
            </Tooltip>
            <Tooltip title="下移">
                <Button shape="circle" icon={<DownOutlined />} onClick={moveDown} disabled={isLast} />
            </Tooltip>
            <Tooltip title="撤销">
                <Button shape="circle" icon={<UndoOutlined />} onClick={undo} />
            </Tooltip>
            <Tooltip title="重做">
                <Button shape="circle" icon={<RedoOutlined />} onClick={redo} />
            </Tooltip>
        </Space>
    )
}

export default EditToolbar
